<script setup>
import {useRoute} from "vue-router";
import {get, post} from "@/net";
import {reactive, ref} from "vue";
import axios from "axios";
import {ArrowLeft, ChatSquare, CircleCheck, Delete, EditPen, Female, Male, Plus, Star} from "@element-plus/icons-vue";
//html转换器
import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
import Card from "@/components/Card.vue";
import TopicTag from "@/components/TopicTag.vue";
import router from "@/router";
import InteractButton from "@/components/InteractButton.vue";
import {useStore} from "@/store";
import {ElMessage} from "element-plus";

import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';
import TopicEditor from "@/components/TopicEditor.vue";
import TopicCommentEditor from "@/components/TopicCommentEditor.vue";

const route = useRoute()
const store = useStore()

//从路由中获取帖子Id
const tid = route.params.tid

const topic = reactive({
  data: null,
  like: false,
  collect: false,
  comments: null,
  page: 1
})
//初始化：获取帖子信息
const init = () => get(`api/forum/topic?tid=${tid}`, data => {
  topic.data = data
  topic.like = data.interact.like
  topic.collect = data.interact.collect
  loadComments(1)
})
init()

//将ops数据转html
//TODO：不支持md格式
function convertToHtml(content) {
  const ops = JSON.parse(content).ops
  const converter = new QuillDeltaToHtmlConverter(ops, { inlineStyles: true });
  console.log(converter.convert())
  return converter.convert();
}

//将ops转文本
function convertToText(content){
  const delta = JSON.parse(content);
  let text = '';
  // 遍历Delta对象中的所有操作（ops）
  delta.ops.forEach(op => {
    // 检查该操作是否包含插入（insert）动作
    if (op.insert) {
      // 如果是，将插入的文本内容追加到累加器变量中
      // 注意：这里假设insert属性总是字符串，如果可能包含其他类型（如对象表示的嵌入内容），
      // 则需要添加额外的检查和处理逻辑
      text += op.insert;
    }
  });
  // 返回累加后的纯文本结果
  return text;
}

//帖子交互
function interact(type, message) {
  get(`/api/forum/interact?tid=${tid}&type=${type}&state=${!topic[type]}`, () => {
    topic[type] = !topic[type]
    if(topic[type])
      ElMessage.success(`${message}成功！`)
    else
      ElMessage.success(`已取消${message}！`)
  })
}

//帖子编辑
const edit = ref(false)
//帖子更新
function updateTopic(editor) {
  post('/api/forum/update-topic', {
    id: tid,
    type: editor.type.id,
    title: editor.title,
    content: editor.text
  }, () => {
    ElMessage.success('帖子内容更新成功！')
    edit.value = false
    // 更新页面内容
    init()
  })
}

//评论
const comment = reactive({
  show: false,
  text: '',
  quote: null
})
//评论加载
function loadComments(page) {
  topic.comments = null
  topic.page = page
  get(`/api/forum/comments?tid=${tid}&page=${page - 1}`, data => topic.comments = data)
}

//添加评论
function onCommentAdd() {
  comment.show = false
  loadComments(Math.floor(++topic.data.comments / 10) + 1)
}

//删除评论
function deleteComment(id) {
  get(`/api/forum/delete-comment?id=${id}`, () => {
    ElMessage.success('删除评论成功！')
    loadComments(topic.page)
  })
}


</script>

<template>
  <div class="topic-page" v-if="topic.data">
<!--    标题-->
    <div class="topic-main" style="position: sticky;top: 0;z-index: 10">
      <Card style="display: flex;width: 100%;">
        <el-button :icon="ArrowLeft" type="info" size="small"
                   plain round @click="router.push('/index')">返回列表</el-button>
        <div style="text-align: center;flex: 1">
          <Topic-tag  :type="topic.data.type"/>
          <span style="font-weight: bold;margin-left: 5px">{{topic.data.title}}</span>
        </div>
      </Card>
    </div>
<!--    内容-->
    <div class="topic-main">
      <!--      用户信息-->
      <div class="topic-main-left">
        <el-avatar :src="store.avatarUserUrl(topic.data.user.avatar)" :size="60"/>
        <div>
          <div style="font-size: 18px;font-weight: bold">
            {{topic.data.user.username}}
            <span style="color: hotpink" v-if="topic.data.user.gender === 1">
                            <el-icon><Female/></el-icon>
                        </span>
            <span style="color: dodgerblue" v-if="topic.data.user.gender === 0">
                            <el-icon><Male/></el-icon>
                        </span>
          </div>
          <div class="desc">{{topic.data.user.email}}</div>
        </div>
        <el-divider style="margin: 10px 0"/>
        <div style="text-align: left;margin: 0 5px">
          <div class="desc">微信号: {{topic.data.user.wx || '已隐藏或未填写'}}</div>
          <div class="desc">QQ号: {{topic.data.user.qq || '已隐藏或未填写'}}</div>
          <div class="desc">手机号: {{topic.data.user.phone || '已隐藏或未填写'}}</div>
        </div>
        <el-divider style="margin: 10px 0"/>
        <div class="desc" style="margin: 0 5px">{{topic.data.user.desc}}</div>

      </div>
      <!--      帖子内容-->
      <div class="topic-main-right">
        <div class="topic-content" v-html="convertToHtml(topic.data.content)"></div>
        <el-divider/>
        <div style="font-size: 13px;color: grey;text-align: center">
          <div>发帖时间: {{new Date(topic.data.time).toLocaleString()}}</div>
        </div>
        <!--        点赞收藏-->
        <div style="text-align: right;margin-top: 30px;font-size: 25px">
          <interact-button name="编辑帖子" color="dodgerblue" :check="false"
                           @check="edit = true" style="margin-right: 20px"
                           v-if="store.user.id === topic.data.user.id">
            <el-icon><EditPen/></el-icon>
          </interact-button>
          <interact-button name="点个赞吧" check-name="已点赞" color="pink" :check="topic.like"
                           @check="interact('like', '点赞')">
            <el-icon><CircleCheck/></el-icon>
          </interact-button>
          <interact-button name="收藏本帖" check-name="已收藏" color="orange" :check="topic.collect"
                           @check="interact('collect', '收藏')"
                           style="margin-left: 20px">
            <el-icon><Star/></el-icon>
          </interact-button>
        </div>
      </div>
    </div>
<!--    评论-->
    <transition name="el-fade-in-linear" mode="out-in">
      <div v-if="topic.comments">
        <div class="topic-main" style="margin-top: 10px" v-for="item in topic.comments">
          <!--回帖人信息-->
          <div class="topic-main-left">
            <el-avatar :src="store.avatarUserUrl(item.user.avatar)" :size="60"/>
            <div>
              <div style="font-size: 18px;font-weight: bold">
                {{item.user.username}}
                <span style="color: hotpink" v-if="item.user.gender === 1">
                            <el-icon><Female/></el-icon>
                        </span>
                <span style="color: dodgerblue" v-if="item.user.gender === 0">
                            <el-icon><Male/></el-icon>
                        </span>
              </div>
              <div class="desc">{{item.user.email}}</div>
            </div>
            <el-divider style="margin: 10px 0"/>
            <div style="text-align: left;margin: 0 5px">
              <div class="desc">微信号: {{item.user.wx || '已隐藏或未填写'}}</div>
              <div class="desc">QQ号: {{item.user.qq || '已隐藏或未填写'}}</div>
              <div class="desc">手机号: {{item.user.phone || '已隐藏或未填写'}}</div>
            </div>
          </div>
          <!--回帖信息，时间目标-->
          <div class="topic-main-right">
            <div style="font-size: 13px;color: grey">
              <div>评论时间: {{new Date(item.time).toLocaleString()}}</div>
            </div>
            <div v-if="item.quote" class="comment-quote">
              回复: {{item.quote}}
            </div>
            <div class="topic-content" v-html="convertToHtml(item.content)"></div>
            <div style="text-align: right">
              <el-link :icon="ChatSquare" @click="comment.show = true;comment.quote = item"
                       type="info">&nbsp;回复评论</el-link>
              <el-link :icon="Delete" type="danger" v-if="item.user.id === store.user.id"
                       style="margin-left: 20px" @click="deleteComment(item.id)">&nbsp;删除评论</el-link>
            </div>
          </div>
        </div>
        <!--页码-->
        <div style="width: fit-content;margin: 20px auto">
          <el-pagination background layout="prev, pager, next"
                         v-model:current-page="topic.page" @current-change="loadComments"
                         :total="topic.data.comments" :page-size="10"
                         hide-on-single-page/>
        </div>
      </div>
    </transition>

<!--    帖子编辑器-->
    <topic-editor :show="edit" @close="edit = false" v-if="topic.data && store.forum.types"
                  :default-type="topic.data.type" :default-text="topic.data.content"
                  :default-title="topic.data.title" submit-button="更新帖子内容" :submit="updateTopic"/>
<!--    评论编辑器-->
    <topic-comment-editor :show="comment.show" @close="comment.show = false" :tid="tid"
                          :quote="comment.quote" @comment="onCommentAdd"/>
    <div class="add-comment" @click="comment.show = true;comment.quote = null">
      <el-icon><Plus/></el-icon>
    </div>
    <div>

    </div>

  </div>
</template>

<style lang="less" scoped>
.comment-quote {
  font-size: 13px;
  color: grey;
  background-color: rgba(94, 94, 94, 0.1);
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}

.add-comment {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--el-color-primary);
  text-align: center;
  line-height: 45px;
  background: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);

  &:hover {
    background: var(--el-border-color-extra-light);
    cursor: pointer;
  }
}

.topic-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.topic-main {
  display: flex;
  border-radius: 7px;
  margin: 0 auto;
  background-color: var(--el-bg-color);
  width: 800px;

  .topic-main-left {
    width: 200px;
    padding: 10px;
    text-align: center;
    border-right: solid 1px var(--el-border-color);

    .desc {
      font-size: 12px;
      color: grey;
    }
  }

  .topic-main-right {
    width: 600px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;

    .topic-content {
      font-size: 14px;
      line-height: 22px;
      opacity: 0.8;
      flex: 1;
    }
  }
}
</style>